<template>
    <div>
        <el-card class="box-card">
            <el-carousel indicator-position="outside" height="700px">
                <el-carousel-item v-for="item in musicList" :key="item">
                    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=86 v-bind:src="item.song"></iframe>
                    <h3 class="song-size-style">{{ item.title }}</h3>
                    <el-image v-bind:src="item.images" style="width: 600px;height: 400px">
                    </el-image>
                    <br>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "SearchMusic",
        data(){
            return{
                musicList:[{
                    title:'有些人注定不会再见，那么些曾青涩的脸',
                    song:'//music.163.com/outchain/player?type=2&id=26524837&auto=1&height=66',
                    images:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575912215265&di=138f00e22716d8ca068ac975fcb4125a&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171211%2F60b505107fb94bacbc47693e0facf36b.jpeg',
                },
                    {
                        title: '干一杯酒,往事就不用再回头',
                        song:'//music.163.com/outchain/player?type=2&id=498737958&auto=1&height=66',
                        images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575912555899&di=f4e4cd4c72d86d0da1bd06e10b082116&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190127%2Fa76a2da66ac8415eb7568ac8cfce03df.jpeg'
                    },
                    {
                        title: '他是她的流川枫,她是他的苍井空',
                        song:'//music.163.com/outchain/player?type=2&id=357312&auto=1&height=66',
                        images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576075333785&di=cf00a261a02a95116c6ed7e23e682054&imgtype=0&src=http%3A%2F%2Fimg.jammyfm.com%2Fwordpress%2Fwp-content%2Fuploads%2F2017%2F03%2F201703082338325602.png%3Fx-oss-process%3Dstyle%2F750'
                    },
                    {
                        title: '带你回到八十年代摇滚的黄金时期',
                        song:'//music.163.com/outchain/player?type=2&id=5282205&auto=1&height=66',
                        images: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575913016663&di=c39d8c58937a3765240bda0a118ab331&imgtype=0&src=http%3A%2F%2Fp2.music.126.net%2FoWpvvgXaagA-wFXBp0exEw%3D%3D%2F109951163237424624.jpg%3Fsize%3D1440x1080'
                    },
                ]
            }
        }
    }
</script>

<style scoped>
    .song-size-style{
        color: lightslategray;
    }
</style>
